<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }
      canvas {
        outline: 1px solid red;
      }
    </style>
  </head>
  <body>
    <canvas width="500" height="500" id="canvas"></canvas>
    <script>
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");

      class Dot {
        constructor({
          x,
          y,
          r = 5,
          speedX = 1,
          speedY = 0.1,
          // color = "#" + Math.random().toString(16).slice(-6),
          color = `hsl(${Math.round(Math.random() * 360)}, 100%, 30%)`,
        }) {
          this.x = x;
          this.y = y;
          this.r = r;
          this.speedX = speedX;
          this.speedY = speedY;
          this.color = color;
        }

        // 实例方法
        update() {
          // 原型对象的方法里面的this指向的是 实例对象
          //   console.log(this);
          this.x += this.speedX;
          this.y += this.speedY;
          //   return this;

          // if (this.x >= 500 - this.r || this.x <= this.r) {
          //   this.speedX = -this.speedX;
          // }
          // if (this.y >= 500 - this.r || this.y <= this.r) {
          //   this.speedY = -this.speedY;
          // }
          if (this.x >= 1000 - this.r || this.x <= -500) {
            this.speedX = -this.speedX;
          }
          if (this.y >= 1000 - this.r || this.y <= -500) {
            this.speedY = -this.speedY;
          }
        }

        draw() {
          context.beginPath();
          context.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
          context.fillStyle = this.color;
          context.fill();
        }

        checkCrash(index) {
          // 判断圆是否远离 两个圆心距离 两个圆的半径之和 对比
          let sum_R = this.r + myDot.r;
          let distance = Math.hypot(this.x - myDot.x, this.y - myDot.y);
          // console.log(distance);
          if (distance < sum_R) {
            // console.log("撞上了");
            // 我方大 吃了敌方  敌方大 结束游戏
            if (this.r >= myDot.r) {
              // console.log("gameover");
              clearInterval(timer);
            } else {
              // console.log("吃掉小球");
              // 增加我方小球半径
              myDot.r += Math.sqrt(this.r);
              // 删除小球
              dots.splice(index, 1);
            }
          }
        }
      }

      //   var x1 = new Dot({
      //     x: 150,
      //     y: 150,
      //     speedX: -1,
      //     speedY: 0.1,
      //     color: "red",
      //   });
      //   var x2 = new Dot({ x: 100, y: 100 });

      //   初始点
      // let dots = [
      //   new Dot({
      //     x: 150,
      //     y: 150,
      //     r: 3,
      //     speedX: -1,
      //     speedY: 0.1,
      //     color: "red",
      //   }),
      //   new Dot({ x: 100, y: 100, r: 11 }),
      // ];
      let dots = [];

      let myDot = { x: 250, y: 250, r: 10, color: "orange" };
      canvas.onmousemove = function (event) {
        // console.log(event.offsetX);
        myDot.x = event.offsetX;
        myDot.y = event.offsetY;
      };

      let frame = 0;
      let timer = setInterval(() => {
        frame++;
        //   清空画布
        context.clearRect(0, 0, 500, 500);

        // 画出我方球球
        // 临时借用敌方球球的画法
        Dot.prototype.draw.call(myDot);
        // 构造函数的原型对象 == 实例对象的原型

        // 生成一个新的敌方
        if (frame % 50 === 0) {
          dots.push(
            new Dot({
              x: -100,
              y: -100,
              r: Math.random() * myDot.r + myDot.r / 2,
              speedX: Math.random() * 5 - 5,
              speedY: Math.random() * 5 - 5,
            })
          );
        }

        // 更新画出敌方球球
        dots.forEach((dot, index) => {
          dot.update();
          dot.draw();

          dot.checkCrash(index);
        });
      }, 1000 / 60);
    </script>
  </body>
</html>
